<template>
  <div class="quick">
    <div class="_box _top">
      <Header></Header>
    </div>
    <div class="_box _tabs">
      <mu-tabs :value.sync="active3" center>
        <mu-tab>
          易帮商城
        </mu-tab>
        <mu-tab>
          青创项目
        </mu-tab>
        <mu-tab>
          工行金融
        </mu-tab>
      </mu-tabs>
      <div class="_card">
        <div class="_demo _d1" v-if="active3 === 0">
          <div class="_carousel">
            <mu-carousel
              hide-controls
              style="height:100%;width:94%;margin:auto;border-radius:0.2rem;box-shadow:0 0.5vw 0.5vw #ccc"
              transition="fade"
              hide-indicators="true"
            >
              <mu-carousel-item v-for="item in carousel_img" :key="item.index">
                <img :src="item.img" />
              </mu-carousel-item>
            </mu-carousel>
          </div>
          <div class="_flow">
            <vue-waterfall-easy ref="waterfall" :imgsArr="flow.imgsArr" @scrollReachBottom="getData" @click="clickFn" @imgError="imgErrorFn"
              :enablePullDownEvent="true" @pullDownMove="pullDownMove" @pullDownEnd="pullDownEnd"
              isRouterLink=true height="60vh" gap=15 mobileGap=10>
              <div class="_title" slot-scope="props">
                <p>{{props.value.name}}</p>
                <p>{{props.value.info}}</p>
              </div>
            </vue-waterfall-easy>
          </div>
        </div>
        <div class="_demo _d2" v-if="active3 === 1">
          <div class="_showcase">
            <div class="_container">
              <div class="_items" v-for="item in d2.showcase_data" :key="item.index">
                <span class="_icon">
                  <svg aria-hidden="true" style="width:100%;height:100%">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                </span>
                <span class="_title">
                  {{item.title}}
                </span>
              </div>
            </div>
            <div class="_news">{{d2.news[0].msg}}</div>
          </div>
          <div class="_showwindow">
            <mu-carousel
              hide-controls
              style="height:100%;width:100%;margin:auto;border-radius:0.2rem;box-shadow:0 0.5vw 0.5vw #ccc"
              transition="fade"
              hide-indicators="true"
            >
              <mu-carousel-item v-for="item in carousel_img" :key="item.index">
                <img :src="item.img" />
              </mu-carousel-item>
            </mu-carousel>
          </div>
          <div class="_flow">
            <div class="_container">
              <div class="_items" v-for="item in d2.flow_data" :key="item.index">
                <div class="_img">
                  <img :src="item.img" alt="">
                </div>
                <div class="_tag"></div>
                <div class="_hot">&nbsp 热力指数：<span style="color:#ff0000;font-size:1.8vh;">{{item.hot}}</span></div>
                <div class="_title">
                  {{item.title}}
                </div>
                <div class="_msg">
                  {{item.msg}}
                </div>
                <div class="_team">
                  {{item.team}}
                </div>
              </div>
            </div>
            <div class="_fill"
                style="height:10vh;position: relative;width:100%;float:left;"
              >
            </div>
          </div>
        </div>
        <div class="_demo _d3" v-if="active3 === 2">
          <div class="_showcase">
            <div class="_container">
              <div class="_items" v-for="item in d3.showcase_data" :key="item.index">
                <span class="_icon">
                  <svg aria-hidden="true" style="width:100%;height:100%">
                      <use :xlink:href="item.icon"></use>
                  </svg>
                </span>
                <span class="_title">
                  {{item.title}}
                </span>
              </div>
            </div>
          </div>
          <div class="_carousel">
            <mu-carousel
              hide-controls
              style="height:100%;width:94%;margin:auto;border-radius:0.2rem;box-shadow:0 0.5vw 0.5vw #ccc"
              transition="fade"
              hide-indicators="true"
            >
              <mu-carousel-item v-for="item in d3.carousel_img" :key="item.index">
                <img :src="item.img" />
              </mu-carousel-item>
            </mu-carousel>
          </div>
          <div class="_showWindow">
            <div class="_title">
              <span style="left:2vw;font-size:0.45rem;line-height:0.55rem;color:#212121">表现优秀</span>
              <span style="left:30vw;">近半年业绩排行</span>
              <span style="right:2vw;">更多</span>
            </div>
            <div class="_container">
              <div class="_c1 _items">
                <div class="_icon">
                  <svg aria-hidden="true" style="width:100%;height:100%">
                      <use :xlink:href="page_data.showwin.icon[0]"></use>
                  </svg>
                </div>
                <div class="_num">
                  <span class="_h">{{d3.showwin_data[0].num}}%</span>
                  <span class="_p">{{d3.showwin_data[0].info}}</span>
                </div>
                <div class="_detail">{{d3.showwin_data[0].name}}</div>
                <div style="height:0.02rem;width:80%;
                            position:absolute;bottom:0;left:10%;
                            background:#ccc;"></div>
              </div>
              <div class="_c1 _items">
                <div class="_icon">
                  <svg aria-hidden="true" style="width:100%;height:100%">
                      <use :xlink:href="page_data.showwin.icon[1]"></use>
                  </svg>
                </div>
                <div class="_num">
                  <span class="_h">{{d3.showwin_data[1].num}}%</span>
                  <span class="_p">{{d3.showwin_data[1].info}}</span>
                </div>
                <div class="_detail">{{d3.showwin_data[1].name}}</div>
                <div style="height:0.02rem;width:80%;
                            position:absolute;bottom:0;left:10%;
                            background:#ccc;"></div>
              </div>
              <div class="_c2 _items">
                <div class="_icon">
                  <svg aria-hidden="true" style="width:100%;height:100%">
                      <use :xlink:href="page_data.showwin.icon[2]"></use>
                  </svg>
                </div>
                <div class="_num">
                  <span class="_h">{{d3.showwin_data[2].num}}%</span>
                  <span class="_p">{{d3.showwin_data[2].info}}</span>
                </div>
                <div class="_detail">{{d3.showwin_data[2].name}}</div>
              </div>
            </div>
          </div>
          <div class="_flow">
            <div class="_title">
              <span style="left:2vw;font-size:0.45rem;line-height:0.55rem;color:#212121">基金精选</span>
              <span style="left:30vw;">长期稳定</span>
              <span style="right:2vw;">更多</span>
            </div>
            <div class="_container">
              <div class="_items" v-for="item in d3.flow_data" :key="item.index">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="_box _bottom">
      <Leader></Leader>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import Leader from '@/components/leader.vue'
import axios from 'axios'
import vueWaterfallEasy from 'vue-waterfall-easy'

export default {
  data () {
    return {
      active3: 0,
      carousel_img: [
        { id: 1, img: 'static/imgs/b1.webp' },
        { id: 2, img: 'static/imgs/b2.webp' },
        { id: 3, img: 'static/imgs/b3.webp' },
        { id: 4, img: 'static/imgs/b4.webp' }
      ],
      flow: {
        imgsArr: [],
        group: 0, // 当前加载的加载图片的次数
        pullDownDistance: 0
      },
      d3: {
        showcase_data: [
          { icon: '#iconjinrongleiicontubiao-16', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-17', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-18', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-19', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-11', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-12', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-13', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-14', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-15', title: 'xxx', link: '' },
          { icon: '#iconjinrongleiicontubiao-10', title: 'xxx', link: '' }
        ],
        showwin_data: [
          {name: 'xxxx', num: '70.29', info: 'fxfxfx'},
          {name: 'xxxx', num: '70.29', info: 'fxfxfx'},
          {name: 'xxxx', num: '70.29', info: 'fxfxfx'}
        ],
        flow_data: [
          {info: '', name: 'xxx', link: '', num: '', tag: ''},
          {info: '', name: 'xxx', link: '', num: '', tag: ''},
          {info: '', name: 'xxx', link: '', num: '', tag: ''},
          {info: '', name: 'xxx', link: '', num: '', tag: ''}
        ],
        carousel_img: [
          { id: 1, img: 'static/imgs/b5.webp' },
          { id: 2, img: 'static/imgs/b6.webp' },
          { id: 3, img: 'static/imgs/b7.webp' },
          { id: 4, img: 'static/imgs/b4.webp' }
        ]
      },
      d2: {
        news: [{msg: '这是一条热点新闻'}],
        flow_data: [
          { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.5', link: '', img: 'static/imgs/q6.jpg' },
          { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.4', link: '', img: 'static/imgs/q2.jpg' },
          { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/q3.jpg' },
          { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/q4.jpg' },
          { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/q5.jpg' }
        ],
        showcase_data: [
          { icon: '#iconmianxingbeike', title: 'xxx', link: '' },
          { icon: '#iconmianxinggaojiaobei', title: 'xxx', link: '' },
          { icon: '#iconmianxingchonglangban', title: 'xxx', link: '' },
          { icon: '#iconmianxinghedao', title: 'xxx', link: '' },
          { icon: '#iconmianxinghuasa', title: 'xxx', link: '' }
        ]
      },
      page_data: {
        showwin: {
          icon: [
            '#iconjinjiangbei', '#icontongjiangbei', '#iconyinjiangbei'
          ]
        }
      }
    }
  },
  components: {
    Header,
    Leader,
    vueWaterfallEasy
  },
  methods: {
    getData () {
      axios.get('./static/mock/data.json?group=' + this.flow.group) // 真实环境中，后端会根据参数group返回新的图片数组，这里我用一个静态json文件模拟
        .then(res => {
          this.flow.group++
          if (this.flow.group === 10) { // 模拟已经无新数据，显示 slot="waterfall-over"
            this.$refs.waterfall.waterfallOver()
            return
          }
          this.flow.imgsArr = this.flow.imgsArr.concat(res.data)
        })
    },
    clickFn (event, { index, value }) {
      if (event.target.tagName.toLowerCase() === 'img') {
        console.log('img clicked', index, value)
      }
    },
    imgErrorFn (imgItem) {
      console.log('图片加载错误', imgItem)
    },
    changeImgArr () {
      axios.get('./static/mock/data-change.json') // 真实环境中，后端会根据参数group返回新的图片数组，这里我用一个静态json文件模拟
        .then(res => {
          this.flow.imgsArr = res.data
        })
    },
    pullDownMove (pullDownDistance) {
      // console.log('pullDownDistance', pullDownDistance)
      this.flow.pullDownDistance = pullDownDistance
    },
    pullDownEnd (pullDownDistance) {
      console.log('pullDownEnd')
      if (this.flow.pullDownDistance > 50) {
        alert('下拉刷新')
      }
      this.flow.pullDownDistance = 0
    }
  },
  created () {
    this.getData()
    // 删除某个卡片
    // setTimeout(()=>{
    //   this.flow.imgsArr.splice(1,1)
    // },2000)
  }
}
</script>

<style lang="scss" scoped>
.quick {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
._box {
  width: 100%;
}
._top {
  position: fixed;
  top: 0;
  z-index: 100;
}
._bottom {
  position: fixed;
  bottom: 0;
  z-index: 100;
}
._tabs{
  width: 100%;
  height: 87vh;
  top:7%;
  position: relative;
  .mu-tabs{
    background: rgba($color: #fff, $alpha: 0.0);
    .mu-tab{
      color:#424242;
    }
    .mu-tab-active{
      color: #ef5350;
    }
  }
  ._card{
    width: 94%;
    height: 100%;
    margin: 0 auto;
    ._demo {
      top:1%;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    ._d1 {
      ._carousel {
        width: 100%;
        height: 20%;
        position: relative;
        img{
          width: 100%;
        }
      }
      ._flow {
        top: 2%;
        width: 100%;
        min-height: 70%;
        position: relative;
        a.img-inner-box{
          border-radius: 0.2rem !important;
          background: #fff;
          overflow: hidden;
        }
        ._title{
          width: 100%;
          height: 30%;
        }
      }
    }
    ._d3{
      ._showcase{
        width: 100%;
        height: 18%;
        border-bottom:1px #ccc solid;
        ._container {
          position: relative;
          margin: 0 auto;
          width: 80%;
          height: 100%;
          ._items {
            width: 20%;
            height: 50%;
            position: relative;
            float: left;
            ._icon{
              width:100%;
              height: 70%;
              display: block;
            }
          }
        }
      }
      ._carousel {
        width: 100%;
        height: 15%;
        position: relative;
        top: 2%;
        img{
          height: 100%;
        }
      }
      ._showWindow{
        width: 100%;
        height: 35%;
        position: relative;
        top: 4%;
        ._title {
          width: 100%;
          height: 12%;
          position: relative;
          span{
            position: absolute;
            bottom:0;
            color: #757575;
          }
        }
        ._container{
          width: 94%;
          margin: 0 auto;
          height: 87%;
          background: #fff;
          box-shadow: 0.1vw 0.2vh 0.5vh #ccc;
          border-radius: 0.2rem;
          position: relative;
          top: 4%;
          ._items{
            width: 100%;
            height: 33%;
            position: relative;
            ._icon{
              width: 5vh;
              height: 5vh;
              position: absolute;
              left: 3vw;
              top: 4vw;
            }
            ._num{
              height: 8.5vh;
              width: 25vw;
              position: absolute;
              left: 8vh;
              top: 0;
              ._h{
                font-size: 0.5rem;
                color:#ff5722;
                position: absolute;
                top:1vh;
                font-weight: 600;
                left: 0;
              }
              ._p{
                position: absolute;
                top:5vh;
                left: 0;
                color: #757575;
              }
            }
            ._detail{
              height: 8.5vh;
              width: 50%;
              position: absolute;
              left: 50%;
              top: 0;
              line-height: 8.5vh;
              font-size: 0.4rem;
            }
          }
        }
      }
      ._flow{
        width: 100%;
        min-height: 50vh;
        position: relative;
        top: 6%;
        ._title {
          width: 100%;
          height: 5vh;
          position: relative;
          span{
            position: absolute;
            bottom:0;
            color: #757575;
          }
        }
        ._container{
          width: 94%;
          margin: 0 auto;
          min-height: 40vh;
          position: relative;
          top: 1vh;
          ._items{
            width: 100%;
            height: 10vh;
            background: #fff;
            box-shadow: 0.1vw 0.15vh 0.2vh #ccc;
            border-radius: 0.2rem;
            position: relative;
            float: left;
            margin-top: 1vh;
          }
        }
      }
    }
    ._d2{
      ._showcase{
        width: 94%;
        margin: 0 auto;
        position: relative;
        height: 12vh;
        background: #fff;
        box-shadow: 0.1vw 0.15vh 0.2vh #ccc;
        border-radius: 0.2rem;
        ._container {
          position: relative;
          margin: 0 auto;
          width: 80%;
          height: 60%;
          top: 1vh;
          border-bottom:1px solid #eee ;
          ._items {
            width: 20%;
            height: 100%;
            position: relative;
            float: left;
            ._icon{
              width:100%;
              height: 70%;
              display: block;
            }
          }
        }
        ._news{
          width: 100%;
          height: 3vh;
          position: relative;
          top: 1.2vh;
          font-size: 2vh;
          line-height: 3vh;
        }
      }
      ._showwindow{
        width: 94%;
        margin: 0 auto;
        height: 20vh;
        position: relative;
        background: #fff;
        box-shadow: 0.1vw 0.15vh 0.2vh #ccc;
        border-radius: 0.2rem;
        top: 1vh;
        img{
          width: 100%;
        }
      }
      ._flow{
        width: 96%;
        height: auto;
        margin: 0 auto;
        position: relative;
        top: 2vh;
        ._container{
          width: 100%;
          -moz-column-count:2; /* Firefox */
          -webkit-column-count:2; /* Safari 和 Chrome */
          column-count:2;
          -moz-column-gap: 0.5em;
          -webkit-column-gap: 0.5em;
          column-gap: 0.5em;
          ._items{
            width: 100%;
            min-height: 15vh;
            background: #fff;
            box-shadow: 0.1vw 0.15vh 0.2vh #ccc;
            border-radius: 0.2rem;
            position: relative;
            margin: 0.5vh 0;
            overflow: hidden;
            font-size: 2vh;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            ._img{
              width: 100%;
              position: relative;
              align-items:center;
              justify-content:center;
              img{
                width: 100%;
              }
            };
            ._hot{
              font-size: 1vh;
              text-align:left;
              width: 100%;
              height: 2vh;
              position: relative;
            }
            ._title{
              width: 100%;
              height: 4vh;
              position: relative;
              line-height: 4vh;
            }
            ._msg{
              width: 100%;

              position: relative;
            }
            ._team{
              width: 100%;
              height: 4vh;
              position: relative;
              line-height: 4vh;
            }
          }
        }
      }
    }
  }
}
</style>
